<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- #### 类
声明，实例化，属性和方法使用
在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。
class 的本质是 function。
它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。 -->
    <script>
        // 匿名类   此处的cat是一个变量名
        let Cat = class {
            // constructor中定义的属性可以称为实例属性
            constructor(name) {
                    this.name = name; //给属性赋值
                }
                //非静态函数不要用function修饰
            bark() {
                console.log("喵喵喵");
            }
        }

        // 命名类 有具体的类名
        let Dog = class Dog {
                constructor(name) {
                    this.name = name;
                }
                bark() {
                    console.log("汪汪汪");
                }
            }
            //创建对象
        let cat = new Cat("tom");
        let dog = new Dog("旺财");
        //打印对象
        console.log(cat); //喵喵喵
        console.log(dog); //汪汪汪

        //调用 bark 方法
        cat.bark();
        dog.bark();
        //prototype 原型，任何一个类都有该属性，通过该属性可以添加非静态方法，属性
        //利用prototype属性添加成员函数
        //prototype 操作的是类对象

        Dog.prototype.bark = function() {
                console.log("吃骨头");
            }
            //修改方法

        dog.bark(); //吃骨头

        Dog.prototype.eat = function() {
                console.log("什么都没得吃");
            }
            //增加方法

        dog.eat(); //什么都没得吃



        //静态属性：class 本身的属性，即直接定义在类内部的属性（ Class.propname ），不需要实例化
        // 静态变量 类名调用
        class Animal1 {
            static name;
        }
        Animal1.name = "animal";
        console.log(Animal1.name);


        //静态方法
        class Animal2 {
            static name;
            static bark() {
                console.log("animal bark");
            }
        }
        Animal2.bark();
    </script>

    <!-- **注意：**
**在类中声明方法的时候，千万不要给该方法加上function关键字**
**方法之间不要用逗号分隔，否则会报错**
constructor方法如果没有显式定义，会隐式生成一个constructor方法。
所以即使没有添加构造函数，构造函数也是存在的。
constructor方法默认返回实例对象this，
但是也可以指定constructor方法返回一个全新的对象，让返回的实例对象不是该类的实例。 -->
</head>

<body>

</body>

</html>